<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"></van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">

        <view class="popup-content" >
            <view class="popup-main">
                <view style="display: flex; justify-content: space-between;">
                    <view class="popupTitle"> {{ navBarTitle }}</view>
                </view>

                <view class="addressList" v-if="addressList.length > 0">
                    <radio-group @change="radioChange">

                        <!-- <van-checkbox-group :value="checked" :checked="checked" @change="handleCheck"> -->
                        <view class="listItem" v-for="(item, index) in addressList" :key="index" :id="item.id">
                            <!-- <view class="listItemLeft"> -->
                                <view class="userInfo ">
                                    <view style="display: flex; align-items: center;">
                                        <view class="name">{{ item.realName }}</view>
                                        <view class="tel">{{ item.phone }}</view>
                                        <view class="default" v-if="item.isDefault">默认</view>
                                    </view>
                                    <view style="display: flex; align-items: center; margin-top: 16rpx;">
                                        <view class="house">{{ item.detail }}</view>
                                    </view>
                                    <view class="setDefault">
                                        <view class="setDefaultLeft">
                                            <radio color="#FF6203" :value="index" :checked="item.isDefault" />
                                            <span v-if="!item.isDefault ">设为默认</span>
                                            <span v-if="item.isDefault" style="color:#FF6203;">已设为默认</span>
                                        </view>
                                        <view class="setDefaultRight">
                                            <view class="" @tap="deleteAddress(item)">删除</view>
                                            <view class="l10" @tap="copyAddress(item)">复制</view>
                                            <view class="l10" @click="toEditAddress(item)">修改</view>
                                        </view>

                                    </view>
                                </view>

                            <!-- </view> -->
                            <!-- <view class="iconDiv">
                                <view class="icon" @click="toEditHouse(item)"><img class="icon"
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/edit.png"
                                        alt="" />
                                </view>
                            </view> -->
                        </view>
                        <!-- </van-checkbox-group> -->
                    </radio-group>
                </view>
                <view class="addressList" v-if="addressList.length === 0">
                    <van-empty
                        class="custom-image"
                        image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/addressEmpty0114.png"
                        description="没有相关地址" />
                </view>
            </view>


        </view>
        </scroll-view>
        <view class="bottom-btnArea">
            <view class="">
                <van-button type="primary"  @click="addAddress">新增地址</van-button>
            </view>

            <view class="no-login" v-html="textWithLink" @click="writeOff"> </view>
            <view class="no-login" > </view>
        </view>
    </view>
</template>

<script>
import {getUserAddressApi,deleteUserAddressApi} from '@/api/mine'
import {setDefaultAddressApi} from '@/api/address'
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        house:{
            type: Number,
            default: () => 1  //0是有房子  1是没房子
        },
        pageBiaoshi:{
            type: String,
            default: () => ''
        }
    },
    data () {
        return {
            scrolling:false,
            curS:0,
            curSName:'',
            date: '',
            showMark: true, // 标记
            navBarTitle:'我的地址',
            option: {},
            url: '',
            stepperValue:1,
            addressList:[
                {
                    name:'王涛',
                    tel:'1523623266',
                    house:'金鑫·滨湖一号3号楼1单元202',
                    isDefault:true
                },
                {
                    name:'王涛员',
                    tel:'1523623254',
                    house:'金鑫·滨湖一号3号楼1单元201',
                    isDefault:false
                },
            ],
            userName:'王涛员',
            userTel:'1523623254',
            checkAll: false, // 标记是否全选
            checked: [], // 全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            inactiveIcon:
            'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            
            popupHeight:'300',
            addressId:'', // 地址id

        }
    },

    computed: {
    },


  watch:{
    // house: {
    //     immediate: true, // 这句重要
    //     handler(v) {
    //         console.log(v, 'v')
    //         if (v === 1) {
    //         this.addressList=[]
    //         } else{
    //             return false
    //         }
    //     },
    //     deep: true
    //   },
    //   addressList:{
    //     immediate: true, // 这句重要
    //     handler(v){
    //         console.log(v,'addressList')
    //     }
    //   }
  },
    onLoad () { },
    onReady () {
        console.log(this.house,this.addressList,'onready')
        this.setIsChecked()
    },
    onShow () {
        this.getUserAddress()
    },

    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft() {
            uni.navigateBack()
        },
        // 插入 isChecked
        setIsChecked(){
            if (this.addressList.length > 0) {
                this.addressList.forEach(item => {
                    // if (item.isDefault === true) {
                    //     this.$set(item, 'isChecked', true)
                    // } else {
                    //     this.$set(item, 'isChecked', false)
                    // }
                })
            }
        },
        // 单选框
        radioChange(e){
            console.log('radio发生change事件，携带value值为：', e.detail.value)

            this.addressList.forEach((item,index)=>{
                console.log(index,'index',typeof(index),typeof(e.detail.value), Number(index)=== Number(e.detail.value))
                if(Number(index)=== Number(e.detail.value)){
                    item.isChecked=true
                    item.isDefault = true
                    this.addressId = item.id
                    setDefaultAddressApi({ addressId: item.id }).then(res => {
                        console.log(res, '设置默认地址')
                        if (res.code === 200) {
                            uni.showToast({ title: '设置成功', icon:'success' });
                            this.getUserAddress(); // 刷新列表
                        }
                    })
                }else{
                    item.isChecked=false
                    item.isDefault = false
                }
            })
        },
       
        // 关闭弹窗
        closePopup () {
            console.log('关闭 关闭关闭---------')
            this.$emit('closeHouse')
        },
        // 点击radio后面的文字
        onChange(val,item){
            console.log(val,item,)
            item.isChecked=!item.isChecked
        },


        // 粘贴
        copyAddress(item){
            const copyData=`姓名:`+ item.name + `\n`+ `电话:`+item.tel +`\n`+`详细地址:`+item.house
        
            wx.setClipboardData({
                data: copyData,
                success: function (res) {
                    console.log(res,'res')
                    wx.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    })
                },
                fail: (err) => {
                    console.error('复制内容失败：', err);
                    wx.showToast({
                        title: '获取内容失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            })
        },

        // 新增地址
        addAddress(){
            console.log('跳转')
            const params={}
            params.pageBiaoshi='my'
            params.handle='add'
            uni.navigateTo({
                url:
                    '/pages/address/addAddress?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })

        },


        // 跳转绑定房子页面
        toEditAddress(item) {
            console.log('跳转')
            const params={}
            params.item=item
            params.pageBiaoshi='my'
            params.handle='edit'
            uni.navigateTo({
                url:
                    '/pages/address/editMyHouse?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },

        // 删除地址
        deleteAddress(item) {
            console.log(item, 'item')
            uni.showModal({
                title: '删除确认',
                content: `确定要删除 ${item.realName}的${item.detail} 的地址吗？`,
                showCancel: true,
                success: (res) => {
                    if (res.confirm) {
                        // 实际删除操作
                        deleteUserAddressApi({ addressId: item.id }).then(res => {
                            if (res.code === 200) {
                                uni.showToast({ title: '删除成功', icon: 'success' });
                                this.getUserAddress(); // 刷新列表
                            }
                        }).catch(err => {
                            uni.showToast({ title: '删除失败', icon: 'none' });
                        });
                    }
                }
            });
        },
        // 获取地址列表
        getUserAddress() {
            getUserAddressApi().then(res => {
                console.log(res, '获取用户地址')
                if (res.code == 200) {
                    this.addressList = res.data || []
                    // const defaultAddress = this.addressDataList.find(item => item.isDefault) || this.addressDataList[0];
                    // if (defaultAddress) {
                    //     this.addressInfo = defaultAddress
                    //     // 更清晰的地址拼接逻辑
                    //     const addressParts = [
                    //         defaultAddress.provinceName,
                    //         defaultAddress.cityName,
                    //         defaultAddress.districtName
                    //     ].filter(Boolean);
                    //     this.addressName = `${addressParts.join('')}${defaultAddress.detail || ''}`.trim();
                    //     // this.addressName = `${addressParts.join(' ')}${addressParts.length ? '' : ''}${defaultAddress.detail || ''}`.trim(); //保持trim()防止首尾空格
                    //     this.wxUserBaseInfo = defaultAddress
                    // }
                    // console.log(this.addressDataList,'ss',this.addressDataList.length)
                    // if (this.addressDataList.length > 0 && defaultAddress) {
                    //     this.latitude = defaultAddress.latitude
                    //     this.longitude = defaultAddress.longitude
                    //     this.getDateList(defaultAddress.latitude, defaultAddress.longitude)
                    // }

                }
            })
        },

  },

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    padding:0 48rpx;
    font-size: 24rpx;
    background: #ffffff;
    border-radius: 16px;
    padding-bottom: 144rpx;
    margin-bottom: 144rpx;



    .popup-main {
        height: 100%
    }


    .popupTitle {
        font-size: 60rpx;
        text-align: left;
        color: #111111;
        line-height: 60rpx;
    }


    .JOpopup-content {
        padding-top: 23px;

    }

    .addressList { 
       margin-top: 10rpx;
       padding-bottom: 144rpx;
    }
}


.listItem {
    // height: 108rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 48rpx 0rpx;
    border-bottom: 1px solid #f9f9f9;

    .userInfo {
        width: 100%;

        .default {
            font-weight: bolder;
            background: #FFF3EC;
            border-radius: 3px;
            padding: 8rpx 13rpx;
            font-size: 26rpx;
            line-height: 26rpx;
            text-align: center;
            margin: 0 0 0 24rpx;
            color: #FF6203;
        }

        .name {
            font-size: 26rpx;
            line-height:26rpx;
            text-align: left;
            color: #333333;
        }

        .tel {
            font-size: 26rpx;
            line-height:26rpx;
            text-align: left;
            color: #333333;
            margin-left: 28rpx;
        }

        .house {
            font-size: 26rpx;
            line-height: 26rpx;
            text-align: left;
            color: #888888;
        }

        .setDefault {
            margin-top: 50rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #888888;

            .setDefaultLeft{
                color: #888888;
                display: flex;
                align-items: center;

                span{
                    font-size: 26rpx;
                    line-height: 26rpx;
                    text-align: left;
                }
            }
            .setDefaultRight {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 26rpx;
                line-height: 26rpx;
                color: #888888;
            }

        }
    
        }

    .iconDiv {
        width: 20%;
        .icon {
            width: 12px;
            height: 12px;
            float: right;
        }
    }
}


.checked-img {
    height: 17px;
    width: 17px;
}
.bottom{
    // padding: 0px 48rpx;
    // margin-bottom: calc(60rpx + env(safe-area-inset-bottom));
}
// 去绑定的按钮
.button{
    // width: 100%;
    font-size: 24rpx;
    color: #ffffff;
    height: 40rpx;
    line-height:40rpx;
    border-radius: 10px;
    border-style: initial !important;
    padding: 0 11px !important;
    background: #FF6203 !important;
    margin-left: 13px;
}

::v-deep .van-cell {
    border: 1px solid #888888;
    // background: #FF6203;
}
::v-deep .van-cell--hover .hover-class{
    border: 1px solid #888888;
}
::v-deep .van-button--primary {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}

::v-deep .van-icon {
    color: #242629 !important;
}
.l10{
    margin-left: 20rpx;
}
.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

